<template>
	<view class="reg">
	
		<view class="info">
			<!-- <view class="form-group">
				<view class="iconfont icon-tuijianren"></view>
				<input  type="text" v-model="username" placeholder="请输入用户姓名">
			</view> -->
			<view class="form-group">
				<view class="iconfont icon-tuijianren"></view>
				<input  type="number" v-model="recommend_mobile" placeholder="请输入推荐人手机号">
			</view>
			<view class="form-group">
				<view class="iconfont icon-shoujihao"></view>
				<input  type="number" v-model="mobile" placeholder="请输入手机号">
			</view>
			<view class="form-group verify">
				<view class="iconfont icon-yanzhengma"></view>
				<input  type="number" v-model="code" placeholder="请输入验证码">
				<view class="get-code" :class="sendStatus?'disabled':''" @tap="sendCode()">{{verifyText}}</view>
			</view>
			<view class="form-group">
				<view class="iconfont icon-mima"></view>
				<input type="text" password="true" v-model="password" placeholder="请设置登录密码">
			</view>
		<!-- 	<view class="form-group">
				<view class="iconfont icon-mima"></view>
				<input type="number" v-model="pay_password" password="true" placeholder="请设置支付密码">
			</view> -->
			
			<view class="btn reg-btn" @tap="reg()">注册</view>
			
			<view class="tips">点击注册，即代表同意<navigator url="">《{{appName}}用户协议》</navigator></view>
		</view>
	</view>
</template>

<script>
	import Request from '../../common/request.js';
	import { appName } from '../../common/config.js'
	
	export default {
		data() {
			return {
				appName: '',
				verifyText: '获取验证码',
				sendStatus: false,
				leftTime: 60,
				username: '',
				recommend_mobile: '',
				mobile: '',
				code: '',
				password: '',
				pay_password: '',
				
			};
		},
		onLoad() {
			this.appName = appName;			
		},
		methods: {
			//发送验证码
			sendCode() {
				if(this.sendStatus == true){
					return;
				}

				var that = this;
				
				var preg = /^1\d{10}$/;
				if(!preg.test(this.mobile)){
					Request.alert('手机号码格式不正确');return;
				}
					
				var params = {
					url: 'sms/send',
					data: {
						mobile: that.mobile
					},
					sCallback: function(){
						that.sendStatus = true;
						that.countdown();
						uni.showToast({
							title:'发送成功'
						})
					}
				}
				
				Request.send(params);
				
			},
			//验证码倒计时
			countdown: function(){
				var that = this;
				var time = 60;
				var start = setInterval(function(){
					time--;
					if(time <= 0){
						clearInterval(start);
						that.sendStatus = false;
						that.verifyText = '获取验证码';

					} else {
						that.verifyText = time+'s 后重发';
						
					}
				},1000);
			},
			//注册
			reg() {
				
// 				if(!this.recommend_mobile){
// 					Request.alert('请输入推荐人手机号');return;
// 				}


// 				if(!this.username) {
// 					Request.alert('用户姓名不能为空');
// 					return;
// 				}

				if(!this.mobile){
					Request.alert('请输入手机号');return;
				}

				if(!this.code){
					Request.alert('请输入验证码');return;
				}

				if(!this.password) {
					Request.alert('登录密码不能为空');
					return;
				}

// 				if(!this.pay_password){
// 					Request.alert('请输入支付密码');return;
// 				}
// 
// 				var payPreg = /^\d{6}$/;
// 				if(!payPreg.test(this.pay_password)){
// 					Request.alert('支付密码为6位数字');return;
// 				}

				var url =  'user/register';
				var that = this;
				
				var formData = {
					recommend_mobile: that.recommend_mobile,
					username: that.mobile,
					mobile: that.mobile,
					code: that.code,
					password: that.password,
					pay_password: that.pay_password,
				};
				
				var params = {
					url: 'user/register',
					data: formData,
					sCallback: function(res) {
						uni.setStorageSync('token', res.data.userinfo.token);
						uni.setStorageSync('userinfo', res.data.userinfo);
						uni.reLaunch({
							url: '/pages/coupon/index'
						})
// 						uni.navigateBack({
// 							delta:2
// 						})
					}
				}
				
				Request.send(params);
			}
		}
	}
</script>

<style>
	page{
		background: #fff;
	}
	.reg{
		padding-top: 100upx;
	}
	
	.reg .info{
		padding: 0 40upx;
	}
	
	.reg .info .form-group{
		display: flex;
		border-bottom: 1upx solid #eee;
		align-items: center;
		height: 80upx;
		line-height: 80upx;
		
	}
	
	.reg .info .form-group .iconfont{
		font-size: 40upx;
		margin-right: 20upx;
	}
	
	.reg .info .form-group input{
		flex: 1;
		font-size: 28upx;
		height: 80upx;
		line-height: 80upx;
	}
	
	.reg .info .form-group uni-input input{

		height: 80upx;
		line-height: 80upx;

	}
	
	.reg .get-code{
		font-size: 24upx;
		color: #e60012;
		padding: 0 20upx;
		border-left: 1upx solid #eee;
	}
	
	.reg .get-code.disabled{
		color: #ccc;
	}
	.reg .btn{
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		font-size: 28upx;
		margin-top: 40upx;
		border-radius: 40upx;
	}
	
	.reg .reg-btn{
		background: #E60012;
		color: #fff;
	}
	
	.reg .tips{
		font-size: 24upx;
		color: #666;
		display: flex;
		justify-content: center;
		margin-top: 20upx;
	}
	
	.reg .tips navigator{
		color: #E60012;
	}

</style>
